$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $('#image')
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview'
    }

    // 1.3 创建裁剪区域
    $image.cropper(options)
    // 点击上传按钮，选择图片
    $('#btnChooseImage').on('click', function () {
        $('#file').click()
    })
    // 监听用户的图片选择
    $('#file').on('change', function (file) {
        console.log(file);
        var fileList = file.target.files
        // 调用URL.createObjectURL方法可以将用户选择的图片对象转成blob链接赋值给img标签
        var imgURL = URL.createObjectURL(fileList[0])
        console.log(imgURL);
        // 3. 重新初始化裁剪区域
        $image
            .cropper('destroy') // 销毁旧的裁剪区域
            .attr('src', imgURL) // 重新设置图片路径
            .cropper(options) // 重新初始化裁剪区域
    })
    // 图片头像上传
    $('#btnUpload').on('click', function () {
        // 1. 获取接口所需要的base64格式的字符串
        // 获取思路：cropper插件提供了一个将图片转换成canvas对象的方法
        // canvas对象是可以转换成base64格式的
        var base64Str = $image
        .cropper('getCroppedCanvas', {
            // 创建一个 Canvas 画布
            width: 100,
            height: 100
          })
          .toDataURL('image/png')
          console.log(base64Str)
          $.ajax({
              url: '/my/update/avatar',
              method: 'POST',
              data: {
                avatar: base64Str
              },
              success: function (res) {
                  if (res.status !== 0) {
                    return  layer.msg(res.message)
                  }
                  layer.msg('更新头像成功')
                  window.parent.getUserInfo()
              }
          })
    })
})